<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Netty视频弹幕实现 Author:Binhao Liu</title>
  <link rel="stylesheet" href="">
  <style type="text/css" media="screen">
    * {
      margin: 0px;
      padding: 0px
    }

    html, body {
      height: 100%
    }

    body {
      overflow: hidden;
      background-color: #FFF;
      text-align: center;
    }

    .flex-column {
      display: flex;
      flex-direction: column;
      justify-content: space-between;, align-items: center;
    }

    .flex-row {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
    }

    .wrap {
      overflow: hidden;
      width: 70%;
      height: 600px;
      margin: 100px auto;
      padding: 20px;
      background-color: transparent;
      box-shadow: 0 0 9px #222;
      border-radius: 20px;
    }

    .wrap .box {
      position: relative;
      width: 100%;
      height: 90%;
      background-color: #000000;
      border-radius: 10px
    }

    .wrap .box span {
      position: absolute;
      top: 10px;
      left: 20px;
      display: block;
      padding: 10px;
      color: #336688
    }

    .wrap .send {
      display: flex;
      width: 100%;
      height: 10%;
      background-color: #000000;
      border-radius: 8px
    }

    .wrap .send input {
      width: 40%;
      height: 60%;
      border: 0;
      outline: 0;
      border-radius: 5px 0px 0px 5px;
      box-shadow: 0px 0px 5px #d9d9d9;
      text-indent: 1em
    }

    .wrap .send .send-btn {
      width: 100px;
      height: 60%;
      background-color: #fe943b;
      color: #FFF;
      text-align: center;
      border-radius: 0px 5px 5px 0px;
      line-height: 30px;
      cursor: pointer;
    }

    .wrap .send .send-btn:hover {
      background-color: #4cacdc
    }
  </style>
</head>
<script>
  var ws = new WebSocket("ws://localhost:9123/lbh");

  ws.onopen = function () {
    // Web Socket 已连接上，使用 send() 方法发送数据
    alert("数据发送中...");
  };
  ws.onmessage = function (e) {
    console.log("接受到消息:"+e.data);
    createEle(e.data);
  };
  ws.onclose = function () {
    // 关闭 websocket
    alert("连接已关闭...");
  };
  function sendMsg(msg) {
    ws.send(msg)
  }


</script>
<body>
<div class="wrap flex-column">
  <div class="box">
    <video src="shape.mp4" width="100%" height="100%" controls autoplay></video>
  </div>
  <div class="send flex-row">

    <input type="text" class="con" placeholder="弹幕发送[]~(^v^)~*"/>

    <div class="send-btn" onclick="javascript:sendMsg(document.querySelector('.con').value)">发送</div>
  </div>
</div>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>
<script>
  //1.获取元素
  var oBox = document.querySelector('.box');   //获取.box元素
  var cW = oBox.offsetWidth;   //获取box的宽度
  var cH = oBox.offsetHeight;   //获取box的高度
  function createEle(txt) {
    //动态生成span标签
    var oMessage = document.createElement('span');   //创建标签
    oMessage.innerHTML = txt;   //接收参数txt并且生成替换内容
    oMessage.style.left = cW + 'px';  //初始化生成位置x
    oBox.appendChild(oMessage);   //把标签塞到oBox里面
    roll.call(oMessage, {
      //call改变函数内部this的指向
      timing: ['linear', 'ease-out'][~~(Math.random() * 2)],
      color: '#' + (~~(Math.random() * (1 << 24))).toString(16),
      top: random(0, cH),
      fontSize: random(16, 32)
    });
  }

  function roll(opt) {
    //弹幕滚动
    //如果对象中不存在timing 初始化
    opt.timing = opt.timing || 'linear';
    opt.color = opt.color || '#fff';
    opt.top = opt.top || 0;
    opt.fontSize = opt.fontSize || 16;
    this._left = parseInt(this.offsetLeft);   //获取当前left的值
    this.style.color = opt.color;   //初始化颜色
    this.style.top = opt.top + 'px';
    this.style.fontSize = opt.fontSize + 'px';
    this.timer = setInterval(function () {
      if (this._left <= 100) {
        clearInterval(this.timer);   //终止定时器
        this.parentNode.removeChild(this);
        return;   //终止函数
      }
      switch (opt.timing) {
        case 'linear':   //如果匀速
          this._left += -2;
          break;
        case 'ease-out':   //
          this._left += (0 - this._left) * .01;
          break;
      }
      this.style.left = this._left + 'px';
    }.bind(this), 1000 / 60);
  }

  function random(start, end) {
    //随机数封装
    return start + ~~(Math.random() * (end - start));
  }

  var aLi = document.querySelectorAll('li');   //10

  function forEach(ele, cb) {
    for (var i = 0, len = aLi.length; i < len; i++) {
      cb && cb(ele[i], i);
    }
  }

  forEach(aLi, function (ele, i) {
    ele.style.left = i * 100 + 'px';
  });
  //产生闭包
  var obj = {
    num: 1,
    add: function () {
      this.num++;   //obj.num = 2;
      (function () {
        console.log(this.num);
      })
    }
  };
  obj.add();//window

</script>
</body>
</html>